WebWizard: Crafting Digital Magic with HTML, CSS, and JavaScript

Prerequisite

• Minimum Intermediate with Mathematics, Physics, Computer/Chemistry.
• Having a Personal Computer (with average specifications)
• Able to read, write and understand the English language

Course Description

There is great significance of websites in this era. You visit several websites everyday whether for business, education, online shopping, or entertainment. But have you ever wondered how these websites are built? How do they work? What are the skills needed to design these websites? How do browsers, computers, and mobile devices interact with the web? In Web Designing Certificate, learn to start your future path towards developing interactive and professional websites, no matter how little technical knowledge and experience you currently have. Web Designing Certificate is designed to start your future path towards developing interactive and professional websites

What you will learn

• Learn the basic tools that every web page coder needs to know.
• Start from the ground up by learning how to implement modern web pages with HTML and CSS.
• Learning how to code pages such that their components rearrange and resize themselves automatically based on the size of the user’s screen.
• Last but certainly not least, students will get a thorough introduction to the most ubiquitous, popular, and incredibly powerful language of the web: JavaScript.
• Using JavaScript, you will be able to build a fully functional web application that utilizes Ajax to expose server-side functionality and data to the end user.

Course Outline

• Week 1 Introduction to Web Development and HTML

  • Introduction to the course, syllabus, and expectations.
  • Basics of web development and the role of HTML, CSS, and JavaScript.
  • Setting up the development environment (text editor, browser, etc.).
  • Introduction to HTML: Structure, elements, and tags.
  • Hands-on: Creating a simple HTML webpage.

• Week 2 More HTML elements, Semantic HTML, Version control with Git and GitHub

  • More HTML elements: headings, paragraphs, lists, links, images.
  • Semantic HTML: importance of using proper tags.
  • Introduction to version control with Git and GitHub.
  • Quiz 1: Assessing HTML knowledge.

• Week 3 CSS Fundamentals

  • Introduction to CSS: Styling basics, selectors, and properties.
  • Applying inline, internal, and external CSS.
  • Box model: understanding margins, borders, padding, and dimensions.

• Week 4 CSS continued: Fonts, colors, backgrounds, CSS layout

  • CSS continued: Fonts, colors, backgrounds.
  • CSS layout: positioning, floats, and display properties.
  • Introduction to Flexbox or CSS Grid for modern layout.

• Week 5 Responsive Web Design and CSS Frameworks

  • Importance of responsive design.
  • Media queries and viewport meta tag.
  • Introduction to mobile-first design.

• Week 6 CSS frameworks (e.g., Bootstrap)

  • CSS frameworks (e.g., Bootstrap): benefits and usage.
  • Creating responsive layouts using a CSS framework.
  • Assignment 1: Building a responsive webpage using a CSS framework.

• Week 7 JavaScript Basics

  • Introduction to JavaScript: history, role, and fundamentals.
  • Variables, data types, operators, and basic syntax.
  • Functions and control structures: if statements, loops.

• Week 8 JavaScript Basics Continued, DOM manipulation, Introduction to asynchronous programming

  • DOM manipulation: selecting and modifying elements.
  • Handling user interactions: events and event listeners.
  • Introduction to asynchronous programming: callbacks and promises.

• Week 9 Advanced JavaScript and Interactivity

  • More on functions: scope, closures, and ES6 features.
  • JavaScript objects and arrays.
  • Error handling and debugging techniques.

• Week 10 Introduction to AJAX and Fetch API, ES6+ features

  • Introduction to AJAX and Fetch API.
  • Introduction to ES6+ features: arrow functions, template literals, destructuring.
  • Quiz 2: Assessing CSS and JavaScript knowledge.

• Week 11 Project Development

  • Students work on a project that combines HTML, CSS, and JavaScript skills.
  • Project topic could involve creating an interactive webpage, form validation, or a simple game.
  • Weekly check-ins to monitor progress and provide guidance.

• Week 12 Finalization and Assessment

  • Finalizing the project and addressing any remaining issues.
  • Project presentations: students showcase their projects and explain their design choices.
  • Assignment 2: Reflective essay on the learning journey.
  • Course review, feedback collection, and discussion of potential next steps in web development.

Grading Criteria

Particulars	Marks (%)
Quizzes	20
Class Participation/ Attendance	15
Projects	25
Final Projects	40
Total	100